<template>
  <div class="hazTree">
    <div class="haz-header">
      调查任务列表
    </div>
    <div>
      <el-collapse  @change="handleWorkChange" accordion style="margin-left: 20px;">
        <el-collapse-item v-for="(item) in workData" :key="item.id" :title="simpleWorkName(item.name)" :name="item.id">
          <div>
            {{item.name }}
          </div>
          <div style="text-align: left;">创建时间：{{ item.createTime }}</div>
          <div  style="text-align: left;">创建人：{{ item.createBy}}</div>
        </el-collapse-item>
      </el-collapse>
    </div>
  </div>
</template>

<script lang="ts">
import {Component, Vue,Emit} from 'vue-property-decorator';
import {
  publishAdnStartList
} from '@/api/investWork';

@Component({
  components: {}
})
export default class WorkTree extends Vue {
  private workData: any = [];

  categoryCheckHandler(data: any) {
    this.$emit('selected', data);
  }

  get simpleWorkName() {
    return function(name){
      if (name.length > 8) {
        return name.slice(0, 5) + '...';
      }
    return name;
    }
  }

  @Emit('workSelected')
  handleWorkChange(item){
  
      return item;
  }

  mounted(){
    publishAdnStartList().then(res =>{
      this.workData =res.data;
    })
  }

}
</script>
<style lang="scss" scoped>
.hazTree{
  width: 260px;
  background-color: #ffffff;
  padding: 12px 0;
  min-height: 100vh;
  .haz-header{
    height: 28px;
    line-height: 28px;
    color: #448f7d;
    padding-left: 18px;
    border-left: 3px solid #448f7d;
    font-size: 14px;
    font-weight: bold;
    background: linear-gradient(to right, #e1f5f1, rgba(255, 255, 255, 1));
  }
}
</style>
